<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">GNS3 VM preferences</h1>
    </div>
  </div>
  <div class="default-content">
    <mat-card class="matCard" *ngIf="gns3vm">
      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="gns3vm.enable">
        Enable the GNS3 VM
      </mat-checkbox>
      <mat-form-field class="select">
        <mat-select
          (selectionChange)="changeVmEngine($event)"
          [ngModelOptions]="{ standalone: true }"
          placeholder="Virtualization engine"
          [(ngModel)]="gns3vm.engine"
        >
          <mat-option *ngFor="let engine of vmEngines" [value]="engine.engine_id">
            {{ engine.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field class="select">
        <mat-select [ngModelOptions]="{ standalone: true }" placeholder="VM name" [(ngModel)]="gns3vm.vmname">
          <mat-option *ngFor="let vm of vms" [value]="vm.vmname">
            {{ vm.vmname }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-checkbox
        *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'"
        [ngModelOptions]="{ standalone: true }"
        [(ngModel)]="gns3vm.headless"
      >
        Run the VM in headless mode
      </mat-checkbox>
      <form *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
        <mat-form-field *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" class="form-field">
          <input matInput type="number" [ngModelOptions]="{ standalone: true }" [(ngModel)]="port" placeholder="Port" />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input matInput formControlName="ram" type="number" placeholder="RAM" />
          <span matSuffix>MB</span>
        </mat-form-field>
        <mat-form-field class="form-field">
          <input matInput formControlName="vcpus" type="number" placeholder="vCPUs" />
        </mat-form-field>
      </form>
      <mat-radio-group
        *ngIf="gns3vm.engine !== 'remote'"
        [(ngModel)]="gns3vm.when_exit"
        aria-label="Actions when closing GNS3"
        class="radio-selection"
      >
        <mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
        <mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
        <mat-radio-button value="stop" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
      </mat-radio-group>
    </mat-card>
    <div class="buttons-bar">
      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
      <button mat-raised-button color="primary" (click)="save()">Save</button>
    </div>
  </div>
</div>
